import React, { Component } from 'react'
import {BrowserRouter, Route} from "react-router-dom";

class Bar extends React.Component {

    componentDidMount() {
        console.log("componentDidMount")
    }

    render() {
        const {idx} = this.props;
        return (
            <div>in Bar : {idx}</div>
        )
    }
}

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            idx: 1
         }
    }

    handleClick = () => {
        this.setState({
            idx: this.state.idx+1
        })
    }
    render() { 
        return ( 
            <div>
                <div>
                    {this.state.idx}
                    <button onClick={this.handleClick}>add</button>
                </div>
                <div>
                    <BrowserRouter>
                        <Route render={() => (<Bar idx={this.state.idx}/>)}/>
                    </BrowserRouter>
                </div>
            </div>
         );
    }
}
 
export default Home;